<template>
<nav>
  <div class="container-fluid" style="wight:100%;">
    <div class="row" style="height: 80px; background-color: #eee;">
      <div class="col-sm h-12">
        <h3 class="col col-3 font-weight-bold mt-3">最新热播</h3>
      </div>
      <div class="colsm" style="cursor: pointer" @click="returnhome()">
        <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-x-square" viewBox="0 0 16 16">
          <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
          <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
        </svg>
      </div>
    </div>
    <div class="row" style="height: 600px;">
      <div class="col col-9">
       <!-- <video width="100%" height="100%" controls> -->
         <iframe width="100%" height="100%" :src="video" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
       <!-- </video> -->
      </div>
      <div class="col col-3" style=" background-color: #eee;">
        <div class="container">
          <h3>{{name}}</h3>
          <p class="lead">{{introduction}}</p>
        </div>
      </div>
    </div>
    <div class="col" style="height: 350px;">
      <div class="form-inline">
        <div class="row " style="height: 40px;">
          <div class="col col-ml-2 col-pt-2"><h5>评论区</h5></div>
        </div>
      </div>
      <div class="container">
        <div class="form-group d-flex" >
          <textarea class="form-control col col-5 mr-5"  id="exampleFormControlTextarea1" rows="2"></textarea>
            <button type="submit" class="btn btn-primary btn-mr">提交评论</button>
        </div>
      </div>
      <hr>
      <div class="d-flex pt-1 justify-content-start align-items-center" style="width: 150px;">
        <h4>精彩评论</h4>
        <span class="pl-2">(0)</span>
      </div>
    </div>
    <div class="row" style="height:80px;">
      <div class="col pt-4" style="background-color:#eee">
        <p class="text-center">XXX版权所有</p>
      </div>
    </div>
  </div>
</nav>
  
</template>

<script>
import {getMoviedetail, getMoviedetailhot} from '@/api/moviedetail'
export default {
  name:'PlayArea',
  data(){
    return{
      name:'',
      introduction:'',
      video:''
    }
  },
  methods:{
    returnhome(){
      this.$router.push('/home')
    }
  },
  created(){
    let videoUrl = this.$route.query.id
    getMoviedetail(videoUrl).then(res=>{
      this.name = res.data.data.name
      this.introduction = res.data.data.introduction
      this.video = res.data.data.videoUrl
    }),
    getMoviedetailhot({}).then(resule=>{//最新电影
      console.log(resule)
    })
  }
}
</script>

<style scoped>
h2{
  margin: 0;
  padding: 0;
}
.btn-mr{
  margin-right: 10px;
}
</style>